<template>
  <div>
    <table class="input-table">
      <thead>
        <tr>
          <th></th>
          <td v-for="item in titles" :key="item.value">{{ item.name }}</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(ques, i) in options" :key="ques.id">
          <th>{{ ques.name }}</th>
          <td v-for="item in titles" :key="item.value">
            <input v-model="value[i]" type="radio" :name="ques.id" :value="item.value" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'inputTable',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['titles', 'options', 'value'],
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
// 表格
.input-table {
  padding: 10px 0;
  width: 100%;
  thead {
    tr {
      td {
        margin: 0 12px;
        min-width: 60px;
        max-width: 60px;
        text-align: center;
        font-size: 15px;
        color: #333333;
      }
    }
  }
  tbody {
    tr {
      th {
        font-size: 15px;
        color: #444444;
        font-weight: bold;
        line-height: 20px;
        text-align: left;
      }
      >td {
        &:hover {
          background-color: #eee;
        }
        >input {
          padding: 40% 0;
          width: 100%;
          height: 16px;
        }
      }
    }
  }
  thead, tbody {
    tr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      th {
        flex: 18%;
      }
      td {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        height: 100%;
      }
    }
  }
}
</style>